<template>
  <el-main>
    <el-form  :model="queryFrom" label-width="120px" inline>
      <el-form-item label="申请类型">
        <el-select v-model="queryFrom.jrProductType" placeholder="请选择">
          <el-option v-for="item in this.productTypes" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select v-model="queryFrom.applyState" placeholder="请选择">
          <el-option v-for="item in this.applyStates" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item><br>
      <el-form-item label="查询日期">
        <div class="block">
          <el-date-picker
            v-model="queryFrom.startDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>
      至
      <el-form-item>
        <div class="block">
          <el-date-picker
            v-model="queryFrom.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cfContractId"
        label="申请合同号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="loanMessage"
        label="贷款信息"
        width="180">
      </el-table-column>
      <el-table-column
        prop="jrProductType"
        label="申请类型">
        <template slot-scope="scope">
          <span v-for="item in productTypes" v-if="scope.row.jrProductType==item.id">
            {{item.name}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="loanAmount"
        label="借款金额">
      </el-table-column>
      <el-table-column
        prop="monthLimit"
        label="借款期限">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="申请日期">
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="资金方">
      </el-table-column>
      <el-table-column
        prop="applyState"
        label="申请状态">
        <template slot-scope="scope">
          <span v-for="item in applyStates" v-if="scope.row.applyState==item.id">
            {{item.name}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="auditMemo"
        label="驳回原因">
      </el-table-column>
<!--      <el-table-column-->
<!--        label="去支付">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-for="item in applyStates" v-if="item.id==4">-->
<!--          <button @click="topay(scope.row)">去支付</button>-->
<!--          </span>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="queryFrom.pageNum"
      :limit.sync="queryFrom.pageSize"
      @pagination="getList"
    />

  </el-main>
</template>

<script>

import { listInstallment} from "@/api/financial/installment";

export default {

  data(){
    return{
      productTypes:[
        {id:0,name:"请选择"},
        {id:1,name:"租房分期"},
        {id:2,name:"收房贷"},
        {id:3,name:"应收租约保理"}
        ],
      applyStates:[
        {id:0,name:"请选择"},
        {id:1,name:"申请中"},
        {id:2,name:"初审通过(待复审)"},
        {id:3,name:"初审不通过"},
        {id:4,name:"复审通过"},
        {id:5,name:"复审不通过"},
      ],
      total:null,
      tableData:[],
      queryFrom:{
        pageNum:1,
        pageSize:5,
      },

    }
  },
  methods:{
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryFrom("queryFrom");
      this.handleQuery();
    },
    getList(){
      listInstallment(this.queryFrom).then(response => {
        this.tableData = response.data.list;
        this.total=response.data.total;
      });
    },

  },
  created() {
    this.getList();
  }
};
</script>
